<template>
  <view class="tree">
    <view>
      <ul v-if='arrPresent.length != 0' class="custom-dialog-column">
        <li v-for="(item,index) in column"><i v-if="index!=0" class="iconfont icon-enter"></i><span
            @click="columnClick(item,index)">{{ item.label }}<my-icon class="arr-icon" v-if="index!=column.length-1" type="icon-icon-test41"></my-icon></span></li>
      </ul>
    </view>
    <view class="custom-dialog-checkbox">
      <radio-group v-if="single">
        <view class="custom-dialog-group" v-for="(item,index) in arrPresent" :key="index">
          <radio :disabled="onlySelLeaf && item.children && item.children.length>0" class="custom-dialog-group-left"
                 @click="change(item)" :checked="checked(item)"/>
            <template v-if="treeStyle.style=='style1' || treeStyle.style=='style2' || treeStyle.type=='custom' && treeStyle.type!='noIcon'">
                <my-icon class="custom-icon" v-if="item.children" :classify="collapse.type" size="1.2rem" :style="{'color':collapse.color}" :type="collapse.icon"></my-icon>
                <my-icon class="custom-icon"  v-else :classify="leaf.type" size="1.2rem" :style="{'color':leaf.color}" :type="leaf.icon"></my-icon>
            </template>
            <template v-else-if="treeStyle.style=='style3' && treeStyle.type!='noIcon'">
                <div class="rx-style3">
                    <my-icon v-if="item.children" :classify="collapse.type" size="1rem" :style="{'color':collapse.color}" :type="collapse.icon"></my-icon>
                    <my-icon v-else :classify="leaf.type" size="1rem" :style="{'color':leaf.color}" :type="leaf.icon"></my-icon>
                </div>
            </template>
            <span>{{ item.label }}</span>
           <my-icon class="custom-dialog-group-i" v-if="item.children" @click="next(item)" type="icon-icon-test41"></my-icon>
        </view>
      </radio-group>
      <checkbox-group v-else>
        <view class="custom-dialog-group" v-for="(item,index) in arrPresent" :key="index">
          <checkbox :disabled="onlySelLeaf && item.children && item.children.length>0" class="custom-dialog-group-left"
                    @click="change(item)" :checked='checked(item)'/>
            <template v-if="treeStyle.style=='style1' || treeStyle.style=='style2' || treeStyle.type=='custom' && treeStyle.type!='noIcon'">
                <my-icon class="custom-icon" v-if="item.children" :classify="collapse.type" size="1.2rem" :style="{'color':collapse.color}" :type="collapse.icon"></my-icon>
                <my-icon class="custom-icon"  v-else :classify="leaf.type" size="1.2rem" :style="{'color':leaf.color}" :type="leaf.icon"></my-icon>
            </template>
            <template v-else-if="treeStyle.style=='style3' && treeStyle.type!='noIcon'">
                <div class="rx-style3">
                    <my-icon v-if="item.children" :classify="collapse.type" size="1rem" :style="{'color':collapse.color}" :type="collapse.icon"></my-icon>
                    <my-icon v-else :classify="leaf.type" size="1rem" :style="{'color':leaf.color}" :type="leaf.icon"></my-icon>
                </div>
            </template>
          <span>{{ item.label }}</span>
            <my-icon class="custom-dialog-group-i" v-if="item.children && item.children.length>0" @click="next(item)" type="icon-icon-test41"></my-icon>
        </view>
      </checkbox-group>
      <div class="sub-table-list-kong" style="margin-top: 3rem;" v-if='arrPresent.length == 0'><i
          class="iconfont icon-kongxian"></i><span class="sub-table-list-kong-span">{{i18n('dataEmpty','数据为空')}}</span></div>
    </view>
  </view>
</template>

<script>
import rxAjax from '@/assets/ajax.js';
import util from './util.js';
import MyIcon from "../../../../../components/myIcon";

export default {
  name: 'FormBoListTree',
    components: {MyIcon},
    props: {
    "ajaxType": {
      type: String,
      default: 'get'
    }, "contentType": {
      type: String,
      default: 'json'
    }, "async": {
      type: Boolean,
      default: false
    }, "url": {
      type: String,
      default: ''
    }, "multiSelect": {
      type: Boolean,
      default: false
    }, "dataField": {
      type: String,
      default: ''
    }, "idField": {
      type: String,
      default: 'id'
    }, "textField": {
      type: String,
      default: 'name'
    }, "parentField": {
      type: String,
      default: 'parentId'
    }, "onlySelLeaf": {
      type: Boolean,
      default: false
    },
      "treeStyle":{
          type: String,
          default: ''
      }
  },
  mixins: [util],
  data() {
    return {
      single: !this.multiSelect,
      column: [{
        label: this.$ti18('rxList.all', '全部'),
        value: '-1'
      }],
      treeData: [],
      checkedId: [], //选中树
      checkedData: [],
      arrPresent: [], //展示树的数据
      collapse:{
          type:'jpaasIcon',
          icon:'iconVue3_folder',
          color:'#000000A5',
      },//父节点图标样式
        leaf:{
            type:'jpaasIcon',
            icon:'iconVue3_file',
            color:'#000000A5',
        },//子节点的图标样式
    }
  },
  mounted() {
      if(this.treeStyle && this.treeStyle.type=='system'){
          //系统自定义
          if(this.treeStyle.style=="style1"){
              this.collapse={
                  type:'jpaasIcon',
                  icon:'iconwenjianziliao',
                  color:'#FFDC53FF',
              };
              this.leaf={
                  type:'jpaasIcon',
                  icon:'iconVue3_file',
                  color:'#e3e3e3',
              }
          }else if(this.treeStyle.style=='style3'){
              this.collapse={
                  type:'jpaasIcon',
                  icon:'iconqiyegongsi',
                  color:'#ffffff',
              };
              this.leaf={
                  type:'jpaasIcon',
                  icon:'icongroup_fill',
                  color:'#ffffff',
              }
          }
      }else if(this.treeStyle.type=='custom'){
          this.collapse={
              type:'jpaasIcon',
              icon:JSON.parse(this.treeStyle.collapse.icon).icon,
              color:this.treeStyle.collapse.color,
          };
          this.leaf={
              type:'jpaasIcon',
              icon:JSON.parse(this.treeStyle.leaf.icon).icon,
              color:this.treeStyle.leaf.color,
          }
      }
    this.init();
  },
  methods: {
    i18n(name,text,key){
      return this.$ti18(name,text,"formBoListComponentsLang",key);
    },
    init() {
      if (this.url) {
        if (this.ajaxType == "get") {
          rxAjax.get(this.url, {}).then(res => {
            this.parseForm(res);
          });
        } else if (this.ajaxType == "post") {
          if (this.contentType == "json") {
            rxAjax.postJson(this.url, {}).then(res => {
              this.parseForm(res);
            })
          } else if (this.contentType == "form") {
            rxAjax.postForm(this.url, {}).then(res => {
              this.parseForm(res);
            })
          }
        }
      }
    },
    parseForm(res) {
      var data = this.parseRes(res);
      var ary = this.parseData(data);
      this.arrPresent = ary;
      this.treeData = this.deepClone(ary);
    },
    loadTreeByParent(treeNode, callback) {
      if (!treeNode || treeNode.isLoad || (treeNode.children && treeNode.children.length > 0)) {
        if (callback) {
          callback(treeNode.children);
        }
        return;
      }
      var ctl = this;
      var params = {};
      params[ctl.idField] = treeNode[ctl.idField];
      return rxAjax.postJson(ctl.url, params).then(res => {
        var data = ctl.parseRes(res);
        var source = ctl.listToTree(data, ctl.idField, ctl.parentField);
        ctl.genTreeData(source, ctl.textField, ctl.idField, ctl.idField);
        if (callback) {
          callback(source);
        }
      })
    },
    // 下一级
    next(value) {
      var self = this;
      if (this.async) {
        this.loadTreeByParent(value, function (source) {
          value.isLoad = true;
          if (source.length == 0) {
            return;
          }
          self.column.push({
            'value': value[self.idField],
            'label': value[self.textField]
          });
          self.arrPresent = source;
          self.treeDataFilter(self.treeData, value[self.idField], function (row) {
            row.children = source;
          })
        });
        return;
      }
      self.column.push({
        'value': value[self.idField],
        'label': value[self.textField]
      });
      self.arrPresent = value.children;
    },
    treeDataFilter(ary, value, callback) {
      for (var i = 0; i < ary.length; i++) {
        if (ary[i][this.idField] == value) {
          if (callback) {
            callback(ary[i]);
          }
        }
        if (ary[i].children) {
          this.treeDataFilter(ary[i].children, value, callback);
        }
      }
    },
    //点击导航栏
    columnClick(value, index) {
      this.column = this.column.slice(0, index + 1)
      if (index != 0) {
        for (var i = 0; i < this.treeData.length; i++) {
          if (this.treeData[i][this.idField] == value.value) {
            this.arrPresent = this.treeData[i].children;
            return
          } else if (this.treeData[i].children) {
            this.columnFill(this.treeData[i].children, value)
          }
        }
      } else {
        this.arrPresent = this.treeData;
      }
    },
    // 筛选数据
    columnFill(children, value) {
      for (var i = 0; i < children.length; i++) {
        if (children[i][this.idField] == value.value) {
          this.arrPresent = children[i].children;
        } else if (children[i].children) {
          this.columnFill(children[i].children, value)
        }
      }
    },
    change(item) {
      if (this.onlySelLeaf && item.children && item.children.length > 0) {
        return;
      }
      var id = item[this.idField];
      if (this.single) {
        this.checkedId = [id];
        this.checkedData = [item];
      } else {
        if (this.checkedId.includes(id)) {
          this.checkedId = this.checkedId.filter(res => {
            if (res != id) {
              return res
            }
          })
          this.checkedData = this.checkedData.filter(res => {
            if (res[this.idField] != id) {
              return res;
            }
          })
        } else {
          this.checkedId.push(id);
          this.checkedData.push(item);
        }
      }
      if(this.checked(item)){
          this.$eventBus.$emit("changeTree", {row:item});
      }else {
          this.$eventBus.$emit("changeTree", {row:''});
      }
    },
    // 判断选中是否选中
    checked(item) {
      if (this.checkedId.includes(item[this.idField])) {
        return true
      } else {
        return false
      }
    },
    getData() {
      return this.checkedData;
    }
  }
}
</script>

<style scoped>
.tree {
  display: flex;
  flex-direction: column;
  height: 100%;

}

.custom-dialog-checkbox {
  flex: 1;
  overflow: auto;
  background: white;
  margin-top: 0.5rem;
    border-radius: 5px;
}

.custom-dialog-column {
  background-color: white;
  line-height: 2.5rem;
  overflow: auto;
  padding: 5px;
    border-radius: 5px;
}

.custom-dialog-column li {
  color: #b0b9ca;
  float: left;
}

.custom-dialog-column li > i {
  float: left;
  color: #b0b9ca;
}

.custom-dialog-column li:last-child {
  color: #434d53;
}

.custom-dialog-column li span {
  display: block;
  max-width: 4rem;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.custom-dialog-group {
  overflow: hidden;
  line-height: 2.5rem;
  margin-bottom: 1px;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
    align-items: center;
}

.custom-dialog-group span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-dialog-group-left {
  margin:0rem .5rem;
}

.custom-dialog-group-i{
  margin-right: .5rem;
}
.custom-icon{
    margin-right: 0.25rem;
}
.rx-style3{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgba(66, 133, 244, 1);
    margin-right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arr-icon{
    margin: 0rem 0.2rem 0rem 0.2rem;
}
</style>
